<template>
  <div class="common-layout">
    <el-container class="h-100%">
      <!-- <el-header class="h-15%">
        <el-row class="header-row">
          <el-col :span="24">
            <div class="header-title">
              {{ titleMsg }}
            </div>
          </el-col>
        </el-row>
      </el-header> -->
      <el-main class="main-container">
        <el-row class="main-echart">
          <div ref="myEchartsRef" style="height: 100%; width: 100%;"></div>
        </el-row>
        <!-- <el-row class="main-agc">
          <el-col :span="3" class="main-agc-name">
            实际
          </el-col>
          <el-col :span="19" class="h-100%">
            <el-row :gutter="2" class="h-100%">
              <el-col :span="5" class="main-agc-input">
                <el-input :value="weldData[0]?.agc" readonly />
              </el-col>
              <el-col :span="5" class="main-agc-input">
                <el-input :value="weldData[1]?.agc" readonly />
              </el-col>
              <el-col :span="5" class="main-agc-input">
                <el-input :value="weldData[2]?.agc" readonly />
              </el-col>
              <el-col :span="5" class="main-agc-input">
                <el-input :value="weldData[3]?.agc" readonly />
              </el-col>
              <el-col :span="5" class="main-agc-input">
                <el-input :value="weldData[4]?.agc" readonly />
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="2" class="main-agc-name">
            um
          </el-col>
        </el-row> -->
      </el-main>
    </el-container>
  </div>
</template>

<script setup lang='ts'>
import { ref, onMounted, watch, onUnmounted } from 'vue'
import * as echarts from "echarts";

export type coilType = {
  name: string,
  fgc: number,
  agc: number,
}
interface Props {
  titleMsg?: string,
  weldData?: Array<Partial<coilType>>,
  toolTipMove?:boolean
}

const props: Props = withDefaults(defineProps<Props>(), {
  titleMsg: '轧制力(10KN)',
  toolTipMove : false,
  weldData: () => {
    return [
      {
        name: '#1',
      },
      {
        name: '#2',
      },
      {
        name: '#3',
      },
      {
        name: '#4',
      },
      {
        name: '#5',
      },
    ]
  },
});

const myEchartsRef = ref<HTMLElement>();
let myEcharts: echarts.ECharts

const currentIndex = ref(0);

let tooltipCarouselTimer: number | null = null;
const startTooltipCarousel = () => {
  if (props.toolTipMove === true){
    tooltipCarouselTimer = setInterval(() => {
      if (currentIndex.value === (props.weldData?.length ?? 0) - 1) {
        currentIndex.value = 0;
      } else {
        currentIndex.value++;
      }
      myEcharts.dispatchAction({
        type: 'showTip',
        seriesIndex: 0,
        dataIndex: currentIndex.value
      });
    }, 2000);
  }
}

const clearTooltipCarousel = () => {
  if (tooltipCarouselTimer) {
    clearInterval(tooltipCarouselTimer);
    tooltipCarouselTimer = null;
  }
}

onMounted(() => {
  myEcharts = echarts.init(myEchartsRef.value!);
  let option = setOption();
  myEcharts.setOption(option);

  watch(() => props.weldData, () => {
    option = setOption()
    myEcharts.setOption(option)
  })

  startTooltipCarousel();

  let zRender = myEcharts.getZr();
  myEcharts.on('mouseover', function () {
    clearTooltipCarousel();
  });
  myEcharts.on('mouseout', function () {
    startTooltipCarousel();
  });
  zRender.on('mousemove', () => {
    clearTooltipCarousel();
  });
  zRender.on('globalout', () => {
    startTooltipCarousel();
  });
})

onUnmounted(() => {
  if (myEcharts) {
    myEcharts.dispose()
  }

  if (tooltipCarouselTimer) {
    clearInterval(tooltipCarouselTimer);
    tooltipCarouselTimer = null;
  }
})



const setOption = () => {
  const nameData = props.weldData?.map(item => item.name);
  const fgcData = props.weldData?.map(item => item.fgc == undefined ? '0' : parseFloat(item.fgc + "").toFixed(0));
  const agcData = props.weldData?.map(item => item.agc == undefined ? '0' : parseFloat(item.agc + "").toFixed(0));

  const dataAxis = nameData;
  let option = {
    legend: {
      data: ['FGC', 'AGC'],
      align: 'right',
      textStyle: {
        color: '#fff'
      }
    },
    grid: {
      left: '13%',
      right: '4%',
      bottom: '18%',
      top: '13%',
    },
    xAxis: {
      type: 'category',
      data: dataAxis,
      axisLabel: {
        color: '#fff'
      },
      axisTick: {
        show: false
      },
      axisLine: {
        show: false
      },
      z: 10
    },
    yAxis: {
      boundaryGap: ['0', '10%'],
      axisLine: {
        show: true,
      },
      axisTick: {
        show: true
      },
      axisLabel: {
        color: '#fff'
      },
      splitLine: {
        show: false,
        lineStyle: {
          type: 'dashed',
          color: '#ccc',

        }
      }
    },
    series: [
      {
        name: 'FGC',
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgb(34,73,148)',
          opacity: 0.8,
          borderRadius: [5, 5, 0, 0]
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#ffcc99' },
            { offset: 0.5, color: '#ff9933' },
            { offset: 1, color: '#ff6600' }
          ]),
          barBorderRadius: [5, 5, 0, 0],
        },
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#ff9933' },
              { offset: 0.7, color: '#ff9933' },
              { offset: 1, color: '#ffcc99' }
            ]),
            barBorderRadius: [5, 5, 0, 0],
          }
        },
        barWidth: 15,
        data: fgcData
      },
      {
        name: 'AGC',
        type: 'bar',
        showBackground: true,
        backgroundStyle: {
          color: 'rgb(34,73,148)',
          opacity: 0.8,
          borderRadius: [5, 5, 0, 0]
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#03deff' },
            { offset: 0.5, color: '#0295c1' },
            { offset: 1, color: '#016797' }
          ]),
          barBorderRadius: [5, 5, 0, 0],
        },
        emphasis: {
          itemStyle: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#016797' },
              { offset: 0.5, color: '#0295c1' },
              { offset: 1, color: '#03deff' }
            ]),
            barBorderRadius: [5, 5, 0, 0],
          }
        },
        barWidth: 15,
        data: agcData
      }
    ],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow', // 坐标轴指示器类型为线型
      },
      confine: true,
      backgroundColor: 'rgba(50, 50, 50, 0.7)',
      textStyle: {
        color: '#fff'
      },
      borderColor: 'transparent'
    }
  };
  return option;
}

</script>
<style scoped lang="less">
.common-layout {
  height: 100%;
  padding: 0 4px;

  .header-row {
    height: 100%;
    background-color: #074ba5cf;
    box-shadow: 0 0 10px #0a6db4f2 inset;
    border-radius: 5px;

    .header-title {
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #fff;
      font-size: 13px;
      font-weight: 700;
    }
  }

  .main-container {
    height: 85%;
    border: 1px solid #043e91;
    border-radius: 5px;

    .main-echart {
      height: 100%;
      width: 100%;
      overflow: hidden;
    }

    .main-agc {
      display: none;
      height: 15%;

      .main-agc-name {
        height: 100%;
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 13px;
        font-weight: 700;
      }

      .main-agc-input {
        height: 100%;
        padding: 0 2px;
      }

      .el-col-5 {
        max-width: 20%;
        flex: 0 0 20%;
      }
    }
  }


}
</style>
<style scoped>
:deep(.el-header) {
  --el-header-padding: 0;
  padding: var(--el-header-padding);
  box-sizing: border-box;
  flex-shrink: 0;
}

:deep(.el-main) {
  --el-main-padding: 0;
  display: block;
  flex: 1;
  flex-basis: auto;
  overflow: auto;
  box-sizing: border-box;
  padding: var(--el-main-padding);
}

:deep(.el-row) {
  display: flex;
  flex-wrap: wrap;
  position: relative;
  box-sizing: border-box;
  padding: 1px 0 0 0;
}

:deep(.el-input) {
  --el-input-height: var(--el-component-size);
  position: relative;
  font-size: var(--el-font-size-base);
  display: inline-flex;
  width: var(--el-input-width);
  line-height: 100%;
  height: 100%;
  box-sizing: border-box;
  vertical-align: top;
}

:deep(.main-agc .el-input__wrapper) {
  display: inline-flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  padding: 1px 11px;
  background-color: #00c8e6;
  background-image: none;
  border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
  cursor: text;
  transition: var(--el-transition-box-shadow);
  transform: translateZ(0);
  box-shadow: none;
}

:deep(.el-input__inner) {
  --el-input-inner-height: 100%;
  width: 100%;
  flex-grow: 1;
  /* -webkit-appearance: none; */
  color: #000000;
  font-size: inherit;
  font-weight: 700;
  text-align: center;
  height: var(--el-input-inner-height);
  line-height: var(--el-input-inner-height);
  padding: 0;
  outline: 0;
  border: none;
  background: 0 0;
  box-sizing: border-box;
}
</style>